import React from 'react';
import {
  View,
  Text,
  ScrollView,
  TouchableOpacity,
  Image,
  StatusBar,
} from 'react-native';
import { t } from 'react-native-tailwindcss';
import { Link } from '@react-navigation/native';
import Swiper from 'react-native-swiper';

import IconFont from '../../assets/iconfont';
import styles from './style';
import appColor from '../../constants/colors';

import NavButtons from '../../components/NavButtons';

function HomeScreen({ navigation }) {
  const indexIconJG = 50;
  console.log(navigation, 'navigation homeScreen');

  let banner = [
    { src: 'https://cmp.cheyizhuan.com/h5/index_banner.png', url: '' },
    {
      src:
        'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2668398361,679690140&fm=11&gp=0.jpg',
      url: '',
    },
    {
      src:
        'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1863398020,3823612360&fm=11&gp=0.jpg',
      url: '',
    },
  ];

  // let carRoomList = [
  //   {
  //     name: '车间管理',
  //     child: [
  //       { url: '', icon: 'icon-shouye-weixiukaidan', name: '维修开单' },
  //       { url: '', icon: 'icon-shouye-xichekaidan', name: '洗车开单' },
  //       { url: '', icon: 'icon-shouye-xicheguanli', name: '洗车管理' },
  //       { url: '', icon: 'icon-shouye-chacheguanli', name: '查车管理' },
  //       { url: '', icon: 'icon-shouye-wodedingdan', name: '我的订单' },
  //       { url: '', icon: 'icon-shouye-xiangmuguanli', name: '项目管理' },
  //     ],
  //   },
  //   {
  //     name: '门店管理',
  //     child: [
  //       { url: '', icon: 'icon-shouye-caiwubaobiao', name: '财务报表' },
  //       { url: '', icon: 'icon-shouye-shebeiguanli', name: '设备管理' },
  //       { url: '', icon: 'icon-shouye-yuangongguanli', name: '员工管理' },
  //       { url: '', icon: 'icon-shouye-dingdanguanli', name: '订单管理' },
  //       { url: '', icon: 'icon-shouye-kucunguanli', name: '库存管理' },
  //       { url: '', icon: 'icon-shouye-gongyingshangjia', name: '供应商家' },
  //       { url: '', icon: 'icon-shouye-kehuguanli', name: '客户管理' },
  //       { url: '', icon: 'icon-shouye-cheliangguanli', name: '车辆管理' },
  //     ],
  //   },
  //   {
  //     name: '采购报价',
  //     child: [
  //       { url: '', icon: 'icon-shouye-peijianxunjia', name: '配件询价' },
  //       { url: '', icon: 'icon-shouye-xunjiadan', name: '询价单' },
  //       { url: '', icon: 'icon-shouye-gouwuche', name: '购物车' },
  //       { url: '', icon: 'icon-shouye-caigoudan', name: '采购单' },
  //     ],
  //   },
  //   {
  //     name: '商机管理',
  //     child: [
  //       { url: '', icon: 'icon-shouye-shangjitixing', name: '商机提醒' },
  //       { url: '', icon: 'icon-shouye-weixiuanli', name: '维修案列' },
  //       { url: '', icon: 'icon-shouye-baojiadan', name: '报价单' },
  //       { url: '', icon: 'icon-shouye-huiyuanka', name: '会员卡' },
  //       { url: '', icon: 'icon-shouye-zhinengtuoke', name: '智能拓客' },
  //       { url: '', icon: 'icon-shouye-yingxiaohuodong', name: '营销活动' },
  //       { url: '', icon: 'icon-shouye-yonghushangcheng', name: '用户商城' },
  //       { url: '', icon: 'icon-shouye-xianzhimaimai', name: '闲置买卖' },
  //       { url: '', icon: 'icon-shouye-hehuorenguanli', name: '合伙人管理' },
  //     ],
  //   },
  // ];
  let carRoomList = {
    name: '车间管理',
    child: [
      { url: '', icon: 'icon-shouye-weixiukaidan', name: '维修开单' },
      { url: '', icon: 'icon-shouye-xichekaidan', name: '洗车开单' },
      { url: '', icon: 'icon-shouye-xicheguanli', name: '洗车管理' },
      { url: '', icon: 'icon-shouye-chacheguanli', name: '查车管理' },
      { url: '', icon: 'icon-shouye-wodedingdan', name: '我的订单' },
      { url: '', icon: 'icon-shouye-xiangmuguanli', name: '项目管理' },
    ],
  };
  let shopList = {
    name: '门店管理',
    child: [
      {
        url: 'FinancialState',
        icon: 'icon-shouye-caiwubaobiao',
        name: '财务报表',
      },
      {
        url: 'FinancialState',
        icon: 'icon-shouye-shebeiguanli',
        name: '设备管理',
      },
      {
        url: 'FinancialState',
        icon: 'icon-shouye-yuangongguanli',
        name: '员工管理',
      },
      {
        url: 'FinancialState',
        icon: 'icon-shouye-dingdanguanli',
        name: '订单管理',
      },
      {
        url: 'FinancialState',
        icon: 'icon-shouye-kucunguanli',
        name: '库存管理',
      },
      {
        url: 'FinancialState',
        icon: 'icon-shouye-gongyingshangjia',
        name: '供应商家',
      },
      {
        url: 'FinancialState',
        icon: 'icon-shouye-kehuguanli',
        name: '客户管理',
      },
      {
        url: 'FinancialState',
        icon: 'icon-shouye-cheliangguanli',
        name: '车辆管理',
      },
    ],
  };
  let procurementpList = {
    name: '采购报价',
    child: [
      { url: '', icon: 'icon-shouye-peijianxunjia', name: '配件询价' },
      { url: '', icon: 'icon-shouye-xunjiadan', name: '询价单' },
      { url: '', icon: 'icon-shouye-gouwuche', name: '购物车' },
      { url: '', icon: 'icon-shouye-caigoudan', name: '采购单' },
    ],
  };
  let businessList = {
    name: '商机管理',
    child: [
      { url: '', icon: 'icon-shouye-shangjitixing', name: '商机提醒' },
      { url: '', icon: 'icon-shouye-weixiuanli', name: '维修案列' },
      { url: '', icon: 'icon-shouye-baojiadan', name: '报价单' },
      { url: '', icon: 'icon-shouye-huiyuanka', name: '会员卡' },
      { url: '', icon: 'icon-shouye-zhinengtuoke', name: '智能拓客' },
      { url: '', icon: 'icon-shouye-yingxiaohuodong', name: '营销活动' },
      { url: '', icon: 'icon-shouye-yonghushangcheng', name: '用户商城' },
      { url: '', icon: 'icon-shouye-xianzhimaimai', name: '闲置买卖' },
      { url: '', icon: 'icon-shouye-hehuorenguanli', name: '合伙人管理' },
    ],
  };
  return (
    <>
      <View>
        <StatusBar backgroundColor={appColor.theme} />
        {/* 顶部导航 */}
        <View style={[styles.indexHeader]}>
          <Text style={[styles.factoryName]}>众达汽修</Text>
          <TouchableOpacity
            style={[styles.switchFac]}
            onPress={() => navigation.navigate('MaintainIndex')}>
            <Text style={[t.textWhite]}>切换</Text>
          </TouchableOpacity>
          <Link to="/SignIn" style={[t.absolute, t.left0]}>
            <Text style={[t.textWhite]}>登出</Text>
          </Link>
        </View>
        <ScrollView showsVerticalScrollIndicator={false} style={[t.mB20]}>
          <View>
            {/* 轮播 */}
            <View style={styles.wrapper}>
              <Swiper
                autoplay={true}
                dotStyle={styles.dotStyle}
                activeDotStyle={[t.bgThemeBlue, styles.dotStyle]}>
                {banner.map((item, index) => {
                  return (
                    <View key={index}>
                      <Image
                        style={styles.swiperimg}
                        source={{
                          uri: item.src,
                        }}
                      />
                    </View>
                  );
                })}
              </Swiper>
            </View>

            {/* 金刚区 */}
            <View style={styles.kingKong}>
              <View style={styles.kingKong_item}>
                <IconFont
                  name="icon-shouye-jinriliushui"
                  size={indexIconJG}
                  style={styles.jgicon}
                />
                <View style={t.flex1}>
                  <View>
                    <Text style={styles.kingKong_item_textno}> 今日流水</Text>
                  </View>
                  <View>
                    <Text style={styles.kingKong_item_textbo}>0.00</Text>
                  </View>
                </View>
              </View>
              <View style={styles.kingKong_item}>
                <IconFont
                  name="icon-shouye-benzhouliushui"
                  size={indexIconJG}
                  style={styles.jgicon}
                />
                <View style={t.flex1}>
                  <View>
                    <Text style={styles.kingKong_item_textno}> 本周流水</Text>
                  </View>
                  <View>
                    <Text style={styles.kingKong_item_textbo}>4512.36</Text>
                  </View>
                </View>
              </View>
              <View style={styles.kingKong_item}>
                <IconFont
                  name="icon-shouye-benyueliushui"
                  size={indexIconJG}
                  style={styles.jgicon}
                />
                <View style={t.flex1}>
                  <View>
                    <Text style={styles.kingKong_item_textno}> 本月流水</Text>
                  </View>
                  <View>
                    <Text style={styles.kingKong_item_textbo}>9540.23</Text>
                  </View>
                </View>
              </View>
              <View style={styles.kingKong_item}>
                <IconFont
                  name="icon-shouye-jinritaici"
                  size={indexIconJG}
                  style={styles.jgicon}
                />
                <View style={t.flex1}>
                  <View>
                    <Text style={styles.kingKong_item_textno}> 今日台次</Text>
                  </View>
                  <View>
                    <Text style={styles.kingKong_item_textbo}>0</Text>
                  </View>
                </View>
              </View>
              <View style={styles.kingKong_item}>
                <IconFont
                  name="icon-shouye-jinribanka"
                  size={indexIconJG}
                  style={styles.jgicon}
                />
                <View style={t.flex1}>
                  <View>
                    <Text style={styles.kingKong_item_textno}> 今日办卡</Text>
                  </View>
                  <View>
                    <Text style={styles.kingKong_item_textbo}>1</Text>
                  </View>
                </View>
              </View>
              <View style={styles.kingKong_item}>
                <IconFont
                  name="icon-shouye-xinkehushu"
                  size={indexIconJG}
                  style={styles.jgicon}
                />
                <View style={t.flex1}>
                  <View>
                    <Text style={styles.kingKong_item_textno}> 新客户数</Text>
                  </View>
                  <View>
                    <Text style={styles.kingKong_item_textbo}>2</Text>
                  </View>
                </View>
              </View>
            </View>
          </View>

          {/* 车间管理 */}
          <NavButtons listData={carRoomList} showTitle={true} />

          {/* 门店管理 */}
          <NavButtons listData={shopList} showTitle={true} />

          {/* 采购报价 */}
          <NavButtons listData={procurementpList} showTitle={true} />

          {/* 商机管理 */}
          <NavButtons listData={businessList} showTitle={true} />
        </ScrollView>
      </View>
    </>
  );
}

export default HomeScreen;
